<template>
  <div class="box5">
    <div class="title">
      <p>城市排行榜</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="line"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { RobotApi } from "@/api/map/areacount";

//获取图形图标的节点
let line = ref();
onMounted(async () => {
  let mycharts = echarts.init(line.value);
  const res = await RobotApi.getRobotCityCount();
  console.log(res);
  const arr = [
    { num: "深圳", province: 22 },
    { num: "杭州", province: 18 },
    { num: "上海市", province: 15 },
    { num: "北京市", province: 13 },
  ];
  let dataAxis = arr.map((obj) => obj.num);
  let TData = arr.map((item) => Number(item.province));
  let max = Math.max(...TData);
  let maxArr = new Array(TData.length).fill(max);

  let option = {
    title: {
      text: "城市排行榜",
      textStyle: {
        align: "center",
        color: "#fff",
        fontSize: 14,
      },
      top: "3%",
      left: "center",
    },
    grid: {
      left: "12%", // 增加左侧间距
      right: "15%",
      top: "10%", // 增大顶部间距
      bottom: "20%", // 增大底部间距
      containLabel: true,
    },
    xAxis: {
      show: false,
      xAxisIndex: 1,
      splitNumber: 3,
      type: "value",
      nameGap: 0,
      axisTick: {
        show: true,
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      min: function (value) {
        return value.min > 2 ? value.min - 2 : value.min;
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(58,78,105,.8)",
        },
      },
    },
    yAxis: [
      {
        type: "category",
        data: dataAxis,
        axisTick: {
          show: false,
        },
        inverse: true,
        z: 10,
        axisLabel: {
          show: true,
          color: "#fff",
          fontSize: 14,
          interval: 0,
          formatter: function (value) {
            var idx = dataAxis.indexOf(value);
            return (
              "{label|" +
              value +
              "}" +
              "{sort" +
              (idx < 3 ? idx : "Default") +
              "|" +
              (idx + 1) +
              "}"
            );
          },
          rich: {
            label: {
              color: "#fff",
              fontSize: 12,
              padding: [0, 10, 2, 0],
              fontWeigth: "normal",
            },
            sort0: {
              color: "#fff",
              fontSize: 12,
              width: 15,
              height: 15,
              textShadowColor: "rgba(0,0,0,.4)",
              textShadowBlur: 2,
              textShadowOffsetX: -1,
              textShadowOffsetY: 1,
              shadowColor: "rgba(255,102,31,.26)",
              verticalAlign: "middle",
              shadowBlur: 8,
              shadowOffsetY: 4,
              fontStyle: "italic",
              align: "center",
              backgroundColor: "#ff562e",
            },
            sort1: {
              color: "#fff",
              fontSize: 12,
              width: 15,
              height: 15,
              textShadowColor: "rgba(0,0,0,.4)",
              fontStyle: "italic",
              textShadowBlur: 2,
              textShadowOffsetX: -1,
              textShadowOffsetY: 1,
              shadowColor: "rgba(255,171,41,.26)",
              verticalAlign: "middle",
              shadowBlur: 8,
              shadowOffsetY: 4,
              align: "center",
              backgroundColor: "#ff900e",
            },
            sort2: {
              color: "#fff",
              fontSize: 12,
              width: 15,
              height: 15,
              fontStyle: "italic",
              textShadowColor: "rgba(0,0,0,.4)",
              textShadowBlur: 2,
              textShadowOffsetX: -1,
              textShadowOffsetY: 1,
              shadowColor: "rgba(11,175,237,.26)",
              verticalAlign: "middle",
              shadowBlur: 8,
              shadowOffsetY: 4,
              align: "center",
              backgroundColor: "#0599de",
            },
            sortDefault: {
              color: "#fff",
              width: 15,
              height: 15,

              fontSize: 12,
              fontStyle: "italic",
              textShadowColor: "rgba(0,0,0,.4)",
              textShadowBlur: 2,
              textShadowOffsetX: -1,
              textShadowOffsetY: 1,
              shadowColor: "rgba(15,191,129,.26)",
              verticalAlign: "middle",
              shadowBlur: 8,
              shadowOffsetY: 4,
              align: "center",
              backgroundColor: "#0bbe63",
            },
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#e4e4e4",
          },
        },
      },
      {
        position: "left",
        offset: 3,
        axisLine: {
          lineStyle: {
            color: "#fc8452",
            width: 2,
          },
        },
      },
      {
        position: "left",
        offset: 6,
        axisLine: {
          lineStyle: {
            color: "#fc8452",
            width: 2,
          },
        },
      },
    ],
    color: ["#ff562e", "#ff900e", "#0599de", "#0bbe63"],
    series: [
      {
        type: "bar",
        barGap: "-100%",
        barWidth: 6,
        z: 0,
        label: {
          normal: {
            show: true,
            position: "right",
            formatter: function (params) {
              var idy = params.dataIndex > 3 ? 3 : params.dataIndex;
              // 移除百分比符号
              return "{color" + idy + "|" + TData[params.dataIndex] + "}";
            },
            rich: {
              color0: {
                color: "#ff562e",
                fontSize: 14,
                verticalAlign: "bottom",
              },
              color1: {
                color: "#ff900e",
                fontSize: 14,
                verticalAlign: "bottom",
              },
              color2: {
                color: "#0599de",
                fontSize: 14,
                verticalAlign: "bottom",
              },
              color3: {
                color: "#0bbe63",
                fontSize: 14,
                verticalAlign: "bottom",
              },
              u0: {
                fontSize: 14,
                color: "#ff562e",
                padding: 2,
                verticalAlign: "bottom",
              },
              u1: {
                color: "#ff900e",
                fontSize: 14,
                padding: 2,
                verticalAlign: "bottom",
              },
              u2: {
                color: "#0599de",
                fontSize: 14,
                padding: 2,
                verticalAlign: "bottom",
              },
              u3: {
                color: "#0bbe63",
                fontSize: 14,
                padding: 2,
                verticalAlign: "bottom",
              },
            },
          },
        },
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: "#e1e7eb",
          },
        },
        data: maxArr,
      },
      {
        type: "bar",
        barGap: "-100%",
        barWidth: 6,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        z: 8,
        itemStyle: {
          barBorderRadius: 5,
          shadowColor: "rgba(0, 0, 0, 0.1)",
          shadowBlur: 8,
          shadowOffsetY: 8,
          color: (params) => {
            // build a color map as your need.
            //定义一个颜色集合
            var colorList = ["#ff7a0e", "#ffcb48", "#12c9fe", "#13c1a3"];
            var colorList2 = ["#ff562e", "#ff900e", "#0599de", "#0bbe63"];
            //对每个bar显示一种颜色
            var idx = params.dataIndex < 3 ? params.dataIndex : 3;
            var colorS = colorList[idx];
            var colorS2 = colorList2[idx];
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              { offset: 0, color: colorS },
              { offset: 1, color: colorS2 },
            ]);
          },
          emphasis: {
            barBorderRadius: 5,
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              { offset: 1, color: "#00ff90" },
              { offset: 0, color: "#0084f3" },
            ]),
          },
        },
        data: TData,
      },
    ],
  };
  mycharts.setOption(option);
});
</script>

<style scoped lang="scss">
.box5 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 89.5%;

  .title {
    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: 300px;
  }
}
</style>
